<template>
  <div>
    <!-- <div id="map" class="mainmap"></div> -->
    <div id="allmap" class="mainmap"></div>
  </div>
</template>
<script>
import styleJson from "./json/defaultstyle.js";
import blackStyle from "./json/black.json";
import position from "./json/position.js";

import allprovence from "./json/allprovence.js";

import BMap from "BMap";
import echarts from "echarts";
import "echarts/extension/bmap/bmap.js";
import "./AreaRestriction_min.js";
export default {
  components: {},

  data() {
    return {
      blist: [],
      districtLoading: 0
    };
  },

  watch: {},

  mounted() {
    // this.createMap();
    this.drawchart();
    let _this = this;
  },

  methods: {

    drawchart() {
      let _this = this;

      var myChart = echarts.init(document.getElementById("allmap"));

      var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

      var color = ["#a6c84c", "#ffa022", "#46bee9"];

      let data = [];
      let labeldata = [];

      position.map(item => {
        item.suidao.map(suidaoitem => {
          data.push({
            fromName: suidaoitem.name,
            toName: "郑州",
            coords: [suidaoitem.position, [113.60328, 34.798809]]
          });

          labeldata.push({
            name: suidaoitem.name,
            value: suidaoitem.position
          });
        });
      });

      let series = [
        {
          name: "发往数据中心", // 会动的小飞机
          type: "lines",
          coordinateSystem: "bmap",
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.1,
            color: "#6AEEF055",
            symbolSize: 5
          },
          lineStyle: {
            normal: {
              color: "#6AEEF0aa",
              width: 0.5,
              curveness: 0.3
            }
          },
          data: data
        },
        // {
        //     name: '详情',// 线
        //     type: 'lines',
        //     coordinateSystem: 'bmap',
        //     zlevel: 2,
        //     effect: {
        //         show: true,
        //         period: 6,
        //         trailLength: 0,
        //         symbol: planePath,
        //         symbolSize: 15
        //     },
        //     lineStyle: {
        //         normal: {
        //             color: color[1],
        //             width: 1,
        //             opacity: 0.4,
        //             curveness: 0.2
        //         }
        //     },
        //     data: data
        // },
        {
          name: "隧道", //点
          type: "effectScatter",
          coordinateSystem: "bmap",
          zlevel: 2,
          rippleEffect: {
            brushType: "stroke"
          },
          label: {
            color: "#aaa",
            normal: {
              show: true,
              position: "right",
              formatter: "{b}"
            }
          },
          symbolSize: 5,
          itemStyle: {
            normal: {
              color: "#88BE2055"
            }
          },
          data: labeldata.map(item => {
            return {
              name: item.name,
              value: item.value
            };
          })
        }
      ];

      var option = {
        backgroundColor: "",

        tooltip: {
          trigger: "item",
          backgroundColor: "#fff5"
        },
        bmap: {
          center: [113.63835, 34.072556],
          zoom: 8,
          roam: true
        },
        series: series
      };

      myChart.setOption(option);
      var bmap = myChart
        .getModel()
        .getComponent("bmap")
        .getBMap();
      bmap.setMapStyleV2({ styleJson });

      this.map = bmap;

      // setTimeout(function() {
      // _this.addDistrict("河南省");
      // }, 1000);
      // bmap.addControl(new BMap.MapTypeControl());
      // bmap.enableScrollWheelZoom(false);

      this.drawcity('河南省')

    },

    drawcity(cityName) {
      let _this = this
      var bdary = new BMap.Boundary();
      bdary.get(cityName, function(rs) {
        //获取行政区域
        // _this.map.clearOverlays(); //清除地图覆盖物

        //for循环都删除掉了，只剩下这个
        //网上查了下，东西经南北纬的范围
        var EN_JW = "180, 90;"; //东北角
        var NW_JW = "-180,  90;"; //西北角
        var WS_JW = "-180, -90;"; //西南角
        var SE_JW = "180, -90;"; //东南角
        //4.添加环形遮罩层
        var ply1 = new BMap.Polygon(
          rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
          {
            strokeColor: "none",
            fillColor: "#151671ee",
            fillOpacity: 1,
            strokeOpacity: 0.5
          }
        ); //建立多边形覆盖物

        _this.map.addOverlay(ply1);
        //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMap.Polygon(rs.boundaries[0], {
          strokeWeight: 2,
          strokeColor: "#0f0",
          fillColor: ""
        });
        _this.map.addOverlay(ply);
        //map.setViewport(ply.getPath());    //调整视野
      });
    }
  }
};
</script>
<style lang="scss">
.anchorBL {
  display: none;
}

.bm-view {
  //   position: absolute;
  //   width: 97%;
  //   height: calc(100% - 95px);
  // margin-left: 5px;
  // border: 5px solid;
  // box-shadow: inset 0px 0px 50px #fff;
  //   box-shadow: 0 0 5rem rgb(0, 110, 150);
}

.mainmap {
  // padding: 50px;
  position: absolute;
  // top: 10%;
  // left: 20%;
  // width: 60%;
  // height: 80%;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.bmapview {
  width: 100%;
  height: 100%;
}

.BMapLabel {
  background-color: #55555500 !important;
  color: white;
  border: 0px !important;
}
</style>
